import { Component, OnInit } from '@angular/core';
import { PlayLppService } from '../play-lpp.service';
import * as Parse from 'parse';
(Parse as any).serverURL = 'http://metapunk.cn:9999/parse';
Parse.initialize('dev');

@Component({
  selector: 'app-dictionary',
  templateUrl: './dictionary.component.html',
  styleUrls: ['./dictionary.component.scss'],
})
export class DictionaryComponent implements OnInit {
  MyWord: any[] = [];
  wordArray: any[] = [];
  finalGroupedArrays: any[][] = [];
  selectedWords: any;
  tatal: string[] = [];
  N1: number = 1;
  a = 1;
  number: number = 1;
  MyWord_sh: string[] = [];
  joined_String: string = '';
  tatal_1 = ['提升画质', '提升细节', '定制风格'];
  tatal_2 = [
    '人物',
    '年龄',
    '数量',
    '五官表情',
    '人物特征',
    '服饰',
    '主体视角',
  ];
  tatal_3 = ['背景', '自然环境', '四季晨昏', '色调', '色调风格'];
  tatal_4 = ['画幅', '镜头', '视角'];
  tatal_5 = ['整体光线', '颜色', '角度', '情绪氛围'];
  tatal_6 = ['风格', '艺术类型', '特定风格', '艺术流派', '年代风格'];
  tatal_7 = ['3d渲染', '渲染风格', '写实照片感', '电影感', '材质'];
  tatal_8 = ['基础', '进阶'];

  constructor(public lppServ: PlayLppService) {
    this.tatal_number(this.number);
  }

  ngOnInit(): void {
    const DictionaryWord = Parse.Object.extend('DictionaryWord');
    const query = new Parse.Query(DictionaryWord);

    query.limit(1000); // 设置查询结果的数量限制

    query
      .find()
      .then((results) => {
        results.forEach((DictionaryWord) => {
          const wordfirstid = DictionaryWord.get('firstid');
          const wordsecondid = DictionaryWord.get('secondid');
          const wordName = DictionaryWord.get('name');
          const wordexplain = DictionaryWord.get('explain');
          const wordObject = {
            firstid: parseInt(wordfirstid),
            secondid: wordsecondid,
            name: wordName,
            explain: wordexplain,
          };
          this.wordArray.push(wordObject);
        });
        console.log(this.wordArray);

        // 对 wordArray 进行按 firstid 排序
        this.wordArray.sort((a, b) => a.firstid - b.firstid);

        // 调用分组函数处理 wordArray
        this.finalGroupedArrays = this.groupWordArray(this.wordArray);

        // console.log(this.finalGroupedArrays);
      })
      .catch((error) => {
        console.error('Error querying DictionaryWord class:', error);
      });

    // const selectedWords = this.wordArray.filter((word) => {
    //   return word.firstid === 1 && word.secondid === "1.1";
    // });

    // // 使用selectedWords进行后续操作
    // console.log(selectedWords);
  }
  groupWordArray(wordArray: any[]): any[][] {
    // 第一次分组的逻辑
    const firstGroupedArrays: any[][] = [];

    // 根据 firstid 进行分组
    wordArray.forEach((wordObject) => {
      const { firstid, secondid, name, explain } = wordObject;
      let firstGroupIndex = parseInt(firstid) - 1;

      // 如果第一次分组还不存在，则创建一个新的分组
      if (!firstGroupedArrays[firstGroupIndex]) {
        firstGroupedArrays[firstGroupIndex] = [];
      }

      // 向相应的第一次分组中添加词条
      firstGroupedArrays[firstGroupIndex].push({
        firstid,
        secondid,
        name,
        explain,
      });
    });

    // 第二次分组的逻辑
    const groupedArrays: any[][] = [];

    // 根据 secondid 进行分组
    firstGroupedArrays.forEach((firstGroup) => {
      firstGroup.forEach((wordObject) => {
        const { secondid, name, explain } = wordObject;
        let secondGroupIndex = parseInt(secondid) - 1;

        // 如果第二次分组还不存在，则创建一个新的分组
        if (!groupedArrays[secondGroupIndex]) {
          groupedArrays[secondGroupIndex] = [];
        }

        // 向相应的第二次分组中添加词条
        groupedArrays[secondGroupIndex].push({ secondid, name, explain });
      });
    });
    this.findlist(this.number);
    return groupedArrays;
  }
  findlist(N1: number, N2?: number) {
    this.N1 = N1;
    if (N2) {
      this.selectedWords = this.wordArray.filter((word) => {
        // console.log(N2);

        let a = this.number + N2 * 0.1;
        // console.log(a);

        return word.firstid === this.number && word.secondid === a;
      });
    } else {
      this.selectedWords = this.wordArray.filter((word) => {
        let a = this.number + N1 * 0.1;

        return word.firstid === this.number && word.secondid === a;
      });
    }

    // 使用selectedWords进行后续操作
    console.log(this.selectedWords);
  }
  tatal_number(nnumber_: number) {
    this.number = nnumber_;
    this.findlist(1, 1);
    if (this.number == 1) {
      this.tatal = this.tatal_1;
    } else if (this.number == 2) {
      this.tatal = this.tatal_2;
    } else if (this.number == 3) {
      this.tatal = this.tatal_3;
    } else if (this.number == 4) {
      this.tatal = this.tatal_4;
    } else if (this.number == 5) {
      this.tatal = this.tatal_5;
    } else if (this.number == 6) {
      this.tatal = this.tatal_6;
    } else if (this.number == 7) {
      this.tatal = this.tatal_7;
    } else if (this.number == 8) {
      this.tatal = this.tatal_8;
    }
  }
  AddWord(item: any, i: number) {
    let index = this.MyWord.findIndex((element) => element === item);

    if (index !== -1) {
      this.delWord(index);
      console.log(this.MyWord);
    } else {
      this.MyWord.push(item);
      this.MyWord_sh.push(item.explain);
      this.joined_String = this.MyWord_sh.join(', ');
      console.log(this.MyWord);
    }

    console.log(this.joined_String);
  }

  delWord(index: number) {
    this.MyWord.splice(index, 1);
    // console.log(index);
    this.MyWord_sh.splice(index, 1);
    this.joined_String = this.MyWord_sh.join(', ');
    // return this.MyWord_sh
  }
  delallWord() {
    this.MyWord = [];
    this.MyWord_sh = [];
    this.joined_String = this.MyWord_sh.join(', ');
  }
  copyText(joinedString: string) {
    const tag = document.createElement('input');
    tag.setAttribute('id', 'cp_hgz_input');
    tag.value = joinedString;
    document.getElementsByTagName('body')[0].appendChild(tag);

    navigator.clipboard
      .writeText(joinedString)
      .then(() => {
        document.getElementById('cp_hgz_input')!.remove();
        this.moveBox();
      })
      .catch((error) => {
        console.error('复制失败:', error);
      });
  }
  async moveBox(): Promise<void> {
    const box = document.getElementById('CopyPrompt')!; // 假设你有一个ID为'box'的盒子元素
    box.style.transform = 'translateY(300px)';
    await this.sleep(2000); // 停顿2秒

    // 回归移动过程
    box.style.transform = 'translateY(0)';
  }
  sleep(ms: number): Promise<void> {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }
}
